<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>加载动画</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}

		body{
			height: 3000px;
		}

		.jiazaiwrap{
			text-align: center;
			margin-top: 100px;
			display: none;
		}

		.jiazaipart1{
			display: inline-block;
			width: 5px;
			height: 30px;
			background-color: skyblue;
			animation: donghua 1.6s 0s linear infinite;
			border-radius: 10px;
		}

		.jiazaipart1:nth-child(2){
			animation-delay: 0.2s;
		}
		.jiazaipart1:nth-child(3){
			animation-delay: 0.4s;
		}
		.jiazaipart1:nth-child(4){
			animation-delay: 0.2s;
		}
		.jiazaipart1:nth-child(5){
			animation-delay: 0s;
		}

		@keyframes donghua{
			0%{
				transform: scale(1,1);
			}
			50%{
				transform: scale(1,0.5);
			}
			100%{
				transform: scale(1,1);
			}
		}

		/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 10px;  
    background-color: tomato;
}  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}    
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: skyblue;  
}  
/*滑块效果*/
::-webkit-scrollbar-thumb:hover
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background-color: pink;
}


	</style>
</head>
<body>


<div class="jiazaiwrap">
	<span class="jiazaipart1"></span>
	<span class="jiazaipart1"></span>
	<span class="jiazaipart1"></span>
	<span class="jiazaipart1"></span>
	<span class="jiazaipart1"></span>
</div>


<div class="newshow">
	<div class="pic" id="pic"></div>
	<div class="zhengwen" id="zhengwen"></div>

</div>
</body>
<script src="lib/jquery.js"></script>
<script>
	

	$(".jiazaiwrap").css("display","block");

	setTimeout(function(){
		$.ajax({
		url: "http://apis.juhe.cn/cook/query?key=a38d899c29c0bd880c01cc38b0693274&menu=%E8%A5%BF%E7%BA%A2%E6%9F%BF&rn=1&pn=3",
		type: "get",
		dataType: "jsonp",
		success: function(res){
			$(".jiazaiwrap").css("display","none");
			var jieguo = res.result.data[0];
			var pic = $("<img src="+jieguo.albums+">");
			var tt = $("<h4>"+jieguo.title+"</h4>");
			var bd = $("<p>"+jieguo.imtro+"</p>");
			$("#pic").append(pic);
			$("#zhengwen").append(tt);
			$("#zhengwen").append(bd);
			console.log(res);
		},
		error: function(){
			console.log("no data");
		}
	})
	},2000);
	
</script>
</html>